<template>
	<view class="v-drawdown-item">
		<v-overlay
			customStyle="top: 126px"
			:show="show"
			:closeOnClickOverlay="closeOnClickOverlay"
			@click="overlayClick"
		></v-overlay>
		<view
			class="v-drawdown-item__content"
			:style="[style]"
			:animation="animationData"
			ref="animation"
		>
			<slot />
		</view>
	</view>
</template>

<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin("animation");
const dom = uni.requireNativePlugin("dom");
// #endif
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
/**
 * Drawdownitem
 * @description
 * @tutorial url
 * @property {String}
 * @event {Function}
 * @example
 */
export default {
	name: "v-drawdown-item",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			show: false,
			top: "126px",
			// uni.createAnimation的导出数据
			animationData: {},
		};
	},
	mounted() {
		this.init();
	},
	watch: {
		// 发生变化时，需要去更新父组件对应的值
		dataChange(newValue, oldValue) {
			this.updateParentData();
		},
	},
	computed: {
		// 监听对应变量的变化
		dataChange() {
			return [this.title, this.disabled];
		},
		style() {
			const style = {
				zIndex: 10071,
				position: "fixed",
				display: "flex",
				left: 0,
				right: 0,
			};
			style.top = uni.$u.addUnit(this.top);
			return style;
		},
	},
	methods: {
		init() {
			this.updateParentData();
		},
		// 更新父组件所需的数据
		updateParentData() {
			// 获取父组件v-dropdown
			this.getParentData("v-dropdown");
			if (!this.parent)
				uni.$u.error("v-dropdown-item必须配合v-dropdown使用");
			// 查找父组件menuList数组中对应的标题数据
			const menuIndex = this.parent.menuList.findIndex(
				(item) => item.title === this.title
			);
			const menuContent = {
				title: this.title,
				disabled: this.disabled,
			};
			if (menuIndex >= 0) {
				// 如果能找到，则直接修改
				this.parent.menuList[menuIndex] = menuContent;
			} else {
				// 如果无法找到，则为第一次添加，直接push即可
				this.parent.menuList.push(menuContent);
			}
		},
		async setContentAnimate(height) {
			this.animating = true;
			// #ifdef APP-NVUE
			const ref = this.$refs["animation"].ref;
			animation.transition(
				ref,
				{
					styles: {
						height: uni.$u.addUnit(height),
					},
					duration: this.duration,
					timingFunction: "ease-in-out",
				},
				() => {
					this.animating = false;
				}
			);
			// #endif

			// #ifndef APP-NVUE
			const animation = uni.createAnimation({
				timingFunction: "ease-in-out",
			});
			animation
				.height(height)
				.step({
					duration: this.duration,
				})
				.step();
			// 导出动画数据给面板的animationData值
			this.animationData = animation.export();
			// 标识动画结束
			uni.$u.sleep(this.duration).then(() => {
				this.animating = false;
			});
			// #endif
		},
		overlayClick() {
			this.show = false;
			this.setContentAnimate(0);
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.v-drawdown-item {
	&__content {
		background-color: #ffffff;
		overflow: hidden;
		height: 0;
	}
}
</style>
